<template>
    <div class="app-container" v-loading="loading">
        <div class="action-container">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="openAddDialog">添加类别</el-button>
                        <el-button  icon="el-icon-delete" size="small" @click="deleteCategorys">批量删除</el-button>
            <el-button  icon="el-icon-refresh" size="small" @click="refresh">刷新</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="类别名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    >
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="更新时间"
                    >
            </el-table-column>
            <el-table-column
                    label="操作"
                    min-width="100"
            align="left">
                <template slot-scope="scope">
                    <el-button
                      icon="el-icon-edit"
                            size="mini"
                            type="primary"
                            @click="openEditDialog(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                :total-elements="totalElements"
                :change-callback="getCategoryList"
                ref="page"></pagination>
        <el-dialog
                title="添加类别"
                :visible.sync="addDialog"
                :before-close="closeAddDialog">
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog">取 消</el-button>
                <el-button type="primary" @click="addCategory" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="编辑类别"
            :visible.sync="editDialog"
            :before-close="closeEditDialog">
            <el-form>
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="currentRow.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEditDialog">取 消</el-button>
                <el-button type="primary" @click="editCategory" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getCategoryList, addCategory, deleteCategorys, updateCategory} from '../api/category'
import pagination from '@/components/pagination/index'

export default {
  components: { pagination },
  name: 'category',
  data () {
    return {
      loading: false,
      btnLoading: false,
      multipleSelection: [], // 选中数据-多选
      totalElements: 0, // 数据条数
      queryList: {
      }, // 搜素数据
      tableData: [], // 表格数据
      addDialog: false, // 添加角色模态框
      form: {
        username: '',
        password: '',
        name: '',
        phone: '',
        email: '',
        roles: [] // 下拉框多选值
      }, // 添加类别数据
      formLabelWidth: '120px',
      options: [],
      editDialog: false, // 编辑类别模态框
      currentRow: {
        id: '',
        name: '',
        rank: ''
      } // 当前表格对象
    }
  },
  mounted () {
    this.getCategoryList()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleDelete (row) {
      this.multipleSelection.push(row)
      this.deleteCategorys()
    },
    /*
     * 获取类别列表
     * */
    getCategoryList (number, pageSize) {
      this.loading = true
      getCategoryList(number, pageSize, this.queryList).then(response => {
        let data = response.obj
        console.log(data)
        this.totalElements = data.totalElements
        this.tableData = data.content
        setTimeout(() => {
          this.loading = false
        }, 500)
      }).catch(() => {
        this.loading = false
      })
    },

    /*
     * 添加类别
     * */
    /*
     * 打开添加类别模态框
     * */
    openAddDialog () {
      this.addDialog = true
    },
    /*
     * 关闭添加类别模态框
     * */
    closeAddDialog () {
      this.addDialog = false
      this.form = {
        name: ''
      }
    },
    /*
     * 添加类别
     * */
    addCategory () {
      this.loading = true
      this.btnLoading = true
      addCategory(this.form).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.btnLoading = false
        this.closeAddDialog()
        this.$refs.page.refresh()
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    },

    /*
    * 删除类别
    * */
    deleteCategorys () {
      this.$confirm('是否删除类别？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length) {
          this.loading = true
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          deleteCategorys(ids).then(response => {
            this.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            this.multipleSelection = []
            this.$refs.page.refresh()
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message({
            message: '请选择类别',
            type: 'warning',
            duration: 1000
          })
        }
      })
    },

    /*
     * 编辑类别
     * */
    /*
     * 打开编辑类别模态框
     * */
    openEditDialog (row) {
      this.currentRow.id = row.id
      this.currentRow.name = row.name
      this.editDialog = true
    },
    /*
     * 关闭编辑类别模态框
     * */
    closeEditDialog (row) {
      this.editDialog = false
    },
    /*
     * 编辑类别
     * */
    editCategory () {
      this.loading = true
      this.btnLoading = true
      updateCategory(this.currentRow).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.btnLoading = false
        this.closeEditDialog()
        this.$refs.page.refresh()
      }).catch(() => {
        this.btnLoading = false
        this.loading = false
      })
    },

    /*
   * 刷新
   * */
    refresh () {
      this.$refs.page.refresh()
    },
    /*
    * 搜索
    * */
    search () {
      this.$refs.page.search()
    },
    /*
    * 重置
    * */
    reset () {
      this.queryList = {
        name: '',
        rank: ''
      }
      this.$refs.page.search()
    }
  }
}
</script>

<style scoped>
    body .el-table th.gutter {
        display: table-cell !important;
    }
</style>
